[자바스크립트] resize 이벤트 연속해서 발생하지 않도록 하는 방법은?

3,161
View Count

주소 복사하기

자바스크립트의 이벤트 중 resize는 페이지 사이즈가 바뀌면 계속해서... 일반적으로 픽셀단위로 발생합니다. 만약 연속해서 발생하지 않도록 하는 방법은 무엇이 있을까요?

가장 간단한 방법으로 clearTimeout을 활용하는 방법이 있습니다. 아래의 코드를 봐주세요.

# resize 이벤트 연속해서 발생하지 않는 방법

아래와 같이 예제를 작성해보았습니다.

var resizeTimeout;

clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
Code
}, 150);

위 코드는 clearTimeout을 사용하여 만약 resizeTimeout이 존재하는 경우 clear... 즉 제거합니다. 그 이유로 150ms 이전에는 이벤트가 발생하지 않도록 하는 방법입니다.

여기서 주의할 부분이 있다면...

resizeTimeout은 전역에 선언되거나 접근이 가능하여야 합니다. 만약 그렇지 않은 경우 clearTimeout이 해당 변수를 찾아 취소하지 못하므로 반복 이벤트가 발생합니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트에서 사용하는 시스템 대화상자 3가지 알아보기. alert(), confirm(), prompt()

자바스크립트에서 스크롤을 화면 끝으로(마지막) 이동시키는 방법은?